<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3145921" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe6fe;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81c;</span>
                <div class="name">cloud upload</div>
                <div class="code-name">&amp;#xe81c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">展开</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">HTSCIT_展开</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
                <div class="name">创建&添加&批量添加</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ad;</span>
                <div class="name">正确</div>
                <div class="code-name">&amp;#xe8ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">全部订单</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d9;</span>
                <div class="name">提醒</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe74b;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">箭头_左</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">成功</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ad;</span>
                <div class="name">工具</div>
                <div class="code-name">&amp;#xe6ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">帮助</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe621;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe622;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">添加</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe623;</span>
                <div class="name">登出</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89d;</span>
                <div class="name"> 其他订单</div>
                <div class="code-name">&amp;#xe89d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">机构_无数据</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">无数据</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">用户、角色_无数据</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62c;</span>
                <div class="name">箭头 上</div>
                <div class="code-name">&amp;#xe62c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">箭头 右</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">箭头 下</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">登录</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">错误</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb6d;</span>
                <div class="name">上箭头</div>
                <div class="code-name">&amp;#xeb6d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb94;</span>
                <div class="name">表单组件-表格</div>
                <div class="code-name">&amp;#xeb94;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">搜索结果</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78b;</span>
                <div class="name">dashboard</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">setting</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">个人</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec4e;</span>
                <div class="name">待办事项</div>
                <div class="code-name">&amp;#xec4e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">异常管理</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">登录</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">警告</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe716;</span>
                <div class="name">课程</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">error</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1644739648482'); /* IE9 */
  src: url('iconfont.eot?t=1644739648482#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1644739648482') format('woff'),
       url('iconfont.ttf?t=1644739648482') format('truetype'),
       url('iconfont.svg?t=1644739648482#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cloudupload"></span>
            <div class="name">
              cloud upload
            </div>
            <div class="code-name">.icon-cloudupload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankai"></span>
            <div class="name">
              展开
            </div>
            <div class="code-name">.icon-zhankai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhankai1"></span>
            <div class="name">
              HTSCIT_展开
            </div>
            <div class="code-name">.icon-zhankai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chuangjiantianjiapiliangtianjia"></span>
            <div class="name">
              创建&添加&批量添加
            </div>
            <div class="code-name">.icon-chuangjiantianjiapiliangtianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu1"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhengque"></span>
            <div class="name">
              正确
            </div>
            <div class="code-name">.icon-zhengque
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-quanbudingdan"></span>
            <div class="name">
              全部订单
            </div>
            <div class="code-name">.icon-quanbudingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tixing"></span>
            <div class="name">
              提醒
            </div>
            <div class="code-name">.icon-tixing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_arrow_left"></span>
            <div class="name">
              箭头_左
            </div>
            <div class="code-name">.icon-icon_arrow_left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-chenggong"></span>
            <div class="name">
              成功
            </div>
            <div class="code-name">.icon-chenggong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-icon_wrong"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-icon_wrong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gongju"></span>
            <div class="name">
              工具
            </div>
            <div class="code-name">.icon-gongju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bangzhu"></span>
            <div class="name">
              帮助
            </div>
            <div class="code-name">.icon-bangzhu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia1"></span>
            <div class="name">
              添加
            </div>
            <div class="code-name">.icon-tianjia1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dengchu"></span>
            <div class="name">
              登出
            </div>
            <div class="code-name">.icon-dengchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qitadingdan"></span>
            <div class="name">
               其他订单
            </div>
            <div class="code-name">.icon-qitadingdan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jigou_wushuju"></span>
            <div class="name">
              机构_无数据
            </div>
            <div class="code-name">.icon-jigou_wushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wushuju"></span>
            <div class="name">
              无数据
            </div>
            <div class="code-name">.icon-wushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghujiaose_wushuju"></span>
            <div class="name">
              用户、角色_无数据
            </div>
            <div class="code-name">.icon-yonghujiaose_wushuju
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantoushang"></span>
            <div class="name">
              箭头 上
            </div>
            <div class="code-name">.icon-jiantoushang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantouyou"></span>
            <div class="name">
              箭头 右
            </div>
            <div class="code-name">.icon-jiantouyou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jiantouxia"></span>
            <div class="name">
              箭头 下
            </div>
            <div class="code-name">.icon-jiantouxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-denglu"></span>
            <div class="name">
              登录
            </div>
            <div class="code-name">.icon-denglu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cuowu"></span>
            <div class="name">
              错误
            </div>
            <div class="code-name">.icon-cuowu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shangjiantou"></span>
            <div class="name">
              上箭头
            </div>
            <div class="code-name">.icon-shangjiantou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-biaodanzujian-biaoge"></span>
            <div class="name">
              表单组件-表格
            </div>
            <div class="code-name">.icon-biaodanzujian-biaoge
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuojieguo"></span>
            <div class="name">
              搜索结果
            </div>
            <div class="code-name">.icon-sousuojieguo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dashboard"></span>
            <div class="name">
              dashboard
            </div>
            <div class="code-name">.icon-dashboard
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-setting"></span>
            <div class="name">
              setting
            </div>
            <div class="code-name">.icon-setting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-geren"></span>
            <div class="name">
              个人
            </div>
            <div class="code-name">.icon-geren
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daibanshixiang"></span>
            <div class="name">
              待办事项
            </div>
            <div class="code-name">.icon-daibanshixiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yichangguanli"></span>
            <div class="name">
              异常管理
            </div>
            <div class="code-name">.icon-yichangguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-denglu1"></span>
            <div class="name">
              登录
            </div>
            <div class="code-name">.icon-denglu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jinggao"></span>
            <div class="name">
              警告
            </div>
            <div class="code-name">.icon-jinggao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuoyeguanli"></span>
            <div class="name">
              课程
            </div>
            <div class="code-name">.icon-zuoyeguanli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-error"></span>
            <div class="name">
              error
            </div>
            <div class="code-name">.icon-error
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cloudupload"></use>
                </svg>
                <div class="name">cloud upload</div>
                <div class="code-name">#icon-cloudupload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankai"></use>
                </svg>
                <div class="name">展开</div>
                <div class="code-name">#icon-zhankai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhankai1"></use>
                </svg>
                <div class="name">HTSCIT_展开</div>
                <div class="code-name">#icon-zhankai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuangjiantianjiapiliangtianjia"></use>
                </svg>
                <div class="name">创建&添加&批量添加</div>
                <div class="code-name">#icon-chuangjiantianjiapiliangtianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu1"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhengque"></use>
                </svg>
                <div class="name">正确</div>
                <div class="code-name">#icon-zhengque</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-quanbudingdan"></use>
                </svg>
                <div class="name">全部订单</div>
                <div class="code-name">#icon-quanbudingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tixing"></use>
                </svg>
                <div class="name">提醒</div>
                <div class="code-name">#icon-tixing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_arrow_left"></use>
                </svg>
                <div class="name">箭头_左</div>
                <div class="code-name">#icon-icon_arrow_left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chenggong"></use>
                </svg>
                <div class="name">成功</div>
                <div class="code-name">#icon-chenggong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-icon_wrong"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-icon_wrong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongju"></use>
                </svg>
                <div class="name">工具</div>
                <div class="code-name">#icon-gongju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bangzhu"></use>
                </svg>
                <div class="name">帮助</div>
                <div class="code-name">#icon-bangzhu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia1"></use>
                </svg>
                <div class="name">添加</div>
                <div class="code-name">#icon-tianjia1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dengchu"></use>
                </svg>
                <div class="name">登出</div>
                <div class="code-name">#icon-dengchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qitadingdan"></use>
                </svg>
                <div class="name"> 其他订单</div>
                <div class="code-name">#icon-qitadingdan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jigou_wushuju"></use>
                </svg>
                <div class="name">机构_无数据</div>
                <div class="code-name">#icon-jigou_wushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wushuju"></use>
                </svg>
                <div class="name">无数据</div>
                <div class="code-name">#icon-wushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghujiaose_wushuju"></use>
                </svg>
                <div class="name">用户、角色_无数据</div>
                <div class="code-name">#icon-yonghujiaose_wushuju</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantoushang"></use>
                </svg>
                <div class="name">箭头 上</div>
                <div class="code-name">#icon-jiantoushang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantouyou"></use>
                </svg>
                <div class="name">箭头 右</div>
                <div class="code-name">#icon-jiantouyou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantouxia"></use>
                </svg>
                <div class="name">箭头 下</div>
                <div class="code-name">#icon-jiantouxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-denglu"></use>
                </svg>
                <div class="name">登录</div>
                <div class="code-name">#icon-denglu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cuowu"></use>
                </svg>
                <div class="name">错误</div>
                <div class="code-name">#icon-cuowu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangjiantou"></use>
                </svg>
                <div class="name">上箭头</div>
                <div class="code-name">#icon-shangjiantou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaodanzujian-biaoge"></use>
                </svg>
                <div class="name">表单组件-表格</div>
                <div class="code-name">#icon-biaodanzujian-biaoge</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuojieguo"></use>
                </svg>
                <div class="name">搜索结果</div>
                <div class="code-name">#icon-sousuojieguo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dashboard"></use>
                </svg>
                <div class="name">dashboard</div>
                <div class="code-name">#icon-dashboard</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-setting"></use>
                </svg>
                <div class="name">setting</div>
                <div class="code-name">#icon-setting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-geren"></use>
                </svg>
                <div class="name">个人</div>
                <div class="code-name">#icon-geren</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daibanshixiang"></use>
                </svg>
                <div class="name">待办事项</div>
                <div class="code-name">#icon-daibanshixiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yichangguanli"></use>
                </svg>
                <div class="name">异常管理</div>
                <div class="code-name">#icon-yichangguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-denglu1"></use>
                </svg>
                <div class="name">登录</div>
                <div class="code-name">#icon-denglu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinggao"></use>
                </svg>
                <div class="name">警告</div>
                <div class="code-name">#icon-jinggao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuoyeguanli"></use>
                </svg>
                <div class="name">课程</div>
                <div class="code-name">#icon-zuoyeguanli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-error"></use>
                </svg>
                <div class="name">error</div>
                <div class="code-name">#icon-error</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
